/**************************************
 *
 * VLOOK™ CSS - @media 相关的样式
 * (配合 base.less 进行使用)
 *
 * V28.1
 * 2025-01-18
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * Telegram Channel: t.me/vlook_markdown
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

// **********
// 修改时须同步修改 vlook.js 的同名变量
@gSmallScreenWidth:1270px;
@gUnwrapTableScreenWidth:1279px;

// 与插件的 (jq_Window.w() <= 425) 、同名变量同步修改
@gMobileScreenWidth:850px;
// **********

// ---------------
// 针对大于等于该分辨设备的 UI 调整
@media screen and (min-width: 1441px) {
    :root {
        --v-write-w:1100px;
        // 配合 vlook.js 中的 _writeMarginLeft_、_writeMarginLeftDef_ 进行使用
        --v-write-ml: calc(var(--v-nav-center-w) + 30px + (100% - var(--v-write-w) - @writePaddingRight * 2 - var(--v-nav-center-w)) / 2);
    }

    .v-fill-width {
        display: flex;
        width: calc((100% - var(--v-write-w) - @writePaddingRight * 2 - var(--v-nav-center-w)) / 2);
    }

    body {
        background: var(--d-bc);
    }

    content::before,
    .typora-export-content::before {
        content: @docExtContent;
        display: block;
        position: fixed;
        z-index: 0;
        height: 100%;
        width: 100%;
        background-color: @docExtBackgroundColor;
        background-image: @docExtBackgroundImage;
        background-size: @docExtBackgroundSize;
        background-repeat: @docExtBackgroundRepeat;
        background-position: @docExtBackgroundPosition;
        filter: @docExtBackgroundFilter;
    }
    // 编辑时
    content::before {
        width: calc(100% - var(--sidebar-width)); // --sidebar-width 是 Typora 的变量，记录侧边栏宽度
    }

    @{writeOnEditing},
    #write.max {
        background: var(--d-bc) var(--d-bi);
        width: var(--v-write-w);
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    }

    .v-more-doc-content-before,
    .v-more-doc-content-after {
        width: var(--v-write-w);
    }
}

// ---------------
// 针对小于等于该分辨设备的 UI 调整
@media screen and (max-width: @gUnwrapTableScreenWidth) {
    // 导出后，取消表格的自动换行
    @{writeOnHTML} table {
        white-space: pre !important;
    }
}

// ---------------
// 针对小于等于该分辨设备的 UI 调整
@media screen and (max-width: @gSmallScreenWidth) {
    .v-chapter-nav-prev-text,
    .v-chapter-nav-next-text {
        display: none !important;
    }

    .v-btn-group.hover {
        box-shadow: var(--v-fl-sd), @contrastBorder;
    }
    // 逐章导航 UI
    .v-chapter-nav {
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
    }
    .v-chapter-nav-doc-title,
    .v-chapter-nav-current {
        margin-left: 40px !important;
        margin-right: 40px !important;
    }
    .v-chapter-nav-prev,
    .v-chapter-nav-next {
        width: 20% !important;
        border-radius: 0 !important;
    }
    .v-chapter-nav-prev.noeffect.hover,
    .v-chapter-nav-next.noeffect.hover,
    .v-chapter-nav-prev.effect::before,
    .v-chapter-nav-next.effect::before {
        border-radius: 0 !important;
    }

    // 当前字体风格下载提示
    .v-font-style-info-current {
        left: 30px;
    }
}

// ---------------
// 针对小于该分辨设备的 UI 调整
@media screen and (max-width: 1024px) {
}

// 针对超大屏手机、iPad 等设备的 UI 调整
@media screen and (min-width: 641px) and (max-width: 1023px) {
}

// ---------------
// 针对显示宽度小于该尺寸时对分栏引用块的调整（模拟为高清屏时的移动端）
@media screen and (max-width: @gMobileScreenWidth) {
    .genForMobile();

    // ========================================
    // 纵向显示的整体调整
    // ----------------------------------------
    // 以四栏列表方式显示列表
    #write @{n3Hr_MdHr}+ul>li,
    #write @{n3Hr_MdHr}+ul>@{n2Li},
    #write @{n3Hr_MdHr}+ul>@{n3Li},
    #write @{n3Hr_MdHr}+ul>@{n4Li},
    #write @{n3Hr_MdHr}+ol>li,
    #write @{n3Hr_MdHr}+ol>@{n2Li},
    #write @{n3Hr_MdHr}+ol>@{n3Li},
    #write @{n3Hr_MdHr}+ol>@{n4Li},
    // 以五栏列表方式显示列表
    #write @{n4Hr_MdHr}+ul>li,
    #write @{n4Hr_MdHr}+ul>@{n2Li},
    #write @{n4Hr_MdHr}+ul>@{n3Li},
    #write @{n4Hr_MdHr}+ul>@{n4Li},
    #write @{n4Hr_MdHr}+ul>@{n5Li},
    #write @{n4Hr_MdHr}+ol>li,
    #write @{n4Hr_MdHr}+ol>@{n2Li},
    #write @{n4Hr_MdHr}+ol>@{n3Li},
    #write @{n4Hr_MdHr}+ol>@{n4Li},
    #write @{n4Hr_MdHr}+ol>@{n5Li} {
        min-width: 100% !important;
        height: auto !important;
    }
    // 四栏列表内容之间的样式
    #write @{n3Hr_MdHr}+ul>@{n2Li},
    #write @{n3Hr_MdHr}+ul>@{n3Li},
    #write @{n3Hr_MdHr}+ul>@{n4Li},
    #write @{n3Hr_MdHr}+ol>@{n2Li},
    #write @{n3Hr_MdHr}+ol>@{n3Li},
    #write @{n3Hr_MdHr}+ol>@{n4Li},
    // 五栏列表内容之间的样式
    #write @{n4Hr_MdHr}+ul>@{n2Li},
    #write @{n4Hr_MdHr}+ul>@{n3Li},
    #write @{n4Hr_MdHr}+ul>@{n4Li},
    #write @{n4Hr_MdHr}+ul>@{n5Li},
    #write @{n4Hr_MdHr}+ol>@{n2Li},
    #write @{n4Hr_MdHr}+ol>@{n3Li},
    #write @{n4Hr_MdHr}+ol>@{n4Li},
    #write @{n4Hr_MdHr}+ol>@{n5Li} {
        margin-left: 0 !important;
    }

    // ----------------------------------------
    // 四栏引用块
    #write @{n3Hr_MdHr}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa} {
        min-width: 100% !important;
        height: auto !important;
    }
    // ----------------------------------------
    // 纵向显示的微调
    // 四栏引用块内容之间
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa} {
        margin-left: 0 !important;
    }

    .v-nav-center-float,
    .v-link-info-list {
        bottom: @floatTopBottomOnMobile;
    }
    .v-doc-lib,
    .v-footnote-pn {
        left: @writePaddingRight;
        right: @writePaddingRight;
    }
    .v-footnote-pn,
    .v-doc-lib {
        bottom: @floatTopBottomOnMobile * 2;
    }
    .v-mask.left,
    .v-mask.right,
    .v-mask.bottom,
    .v-mask.center {
        background: @theme1;
    }
}

// ---------------
// 针对显示宽度小于该尺寸时对分栏引用块的调整
@media screen and (max-width: 700px) {
    // ========================================
    // 纵向显示的整体调整
    // ----------------------------------------
    // 列表分栏
    // 以三栏方式显示列表
    #write @{n2Hr_MdHr}+ul>li,
    #write @{n2Hr_MdHr}+ul>@{n2Li},
    #write @{n2Hr_MdHr}+ul>@{n3Li},
    #write @{n2Hr_MdHr}+ol>li,
    #write @{n2Hr_MdHr}+ol>@{n2Li},
    #write @{n2Hr_MdHr}+ol>@{n3Li},
    // 以四栏方式显示列表
    #write @{n3Hr_MdHr}+ul>li,
    #write @{n3Hr_MdHr}+ul>@{n2Li},
    #write @{n3Hr_MdHr}+ul>@{n3Li},
    #write @{n3Hr_MdHr}+ul>@{n4Li},
    #write @{n3Hr_MdHr}+ol>li,
    #write @{n3Hr_MdHr}+ol>@{n2Li},
    #write @{n3Hr_MdHr}+ol>@{n3Li},
    #write @{n3Hr_MdHr}+ol>@{n4Li},
    // 以五栏方式显示列表
    #write @{n4Hr_MdHr}+ul>li,
    #write @{n4Hr_MdHr}+ul>@{n2Li},
    #write @{n4Hr_MdHr}+ul>@{n3Li},
    #write @{n4Hr_MdHr}+ul>@{n4Li},
    #write @{n4Hr_MdHr}+ul>@{n5Li},
    #write @{n4Hr_MdHr}+ol>li,
    #write @{n4Hr_MdHr}+ol>@{n2Li},
    #write @{n4Hr_MdHr}+ol>@{n3Li},
    #write @{n4Hr_MdHr}+ol>@{n4Li},
    #write @{n4Hr_MdHr}+ol>@{n5Li} {
        min-width: 100% !important;
        height: auto !important;
    }
    // 三栏列表内容之间的样式
    #write @{n2Hr_MdHr}+ul>@{n2Li},
    #write @{n2Hr_MdHr}+ul>@{n3Li},
    #write @{n2Hr_MdHr}+ol>@{n2Li},
    #write @{n2Hr_MdHr}+ol>@{n3Li},
    // 四栏列表内容之间的样式
    #write @{n3Hr_MdHr}+ul>@{n2Li},
    #write @{n3Hr_MdHr}+ul>@{n3Li},
    #write @{n3Hr_MdHr}+ul>@{n4Li},
    #write @{n3Hr_MdHr}+ol>@{n2Li},
    #write @{n3Hr_MdHr}+ol>@{n3Li},
    #write @{n3Hr_MdHr}+ol>@{n4Li},
    // 五栏列表内容之间的样式
    #write @{n4Hr_MdHr}+ul>@{n2Li},
    #write @{n4Hr_MdHr}+ul>@{n3Li},
    #write @{n4Hr_MdHr}+ul>@{n4Li},
    #write @{n4Hr_MdHr}+ul>@{n5Li},
    #write @{n4Hr_MdHr}+ol>@{n2Li},
    #write @{n4Hr_MdHr}+ol>@{n3Li},
    #write @{n4Hr_MdHr}+ol>@{n4Li},
    #write @{n4Hr_MdHr}+ol>@{n5Li} {
        margin-left: 0 !important;
    }

    // ----------------------------------------
    // 三栏引用块
    #write @{n2Hr_MdHr}+@{quote_details_gsa},
    #write @{n2Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n2Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
    // 四栏引用块
    #write @{n3Hr_MdHr}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa} {
        min-width: 100% !important;
        height: auto !important;
    }
    // ----------------------------------------
    // 纵向显示的微调
    // 三栏引用块内容之间
    #write @{n2Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n2Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
    // 四栏引用块内容之间
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa} {
        margin-left: 0 !important;
    }
}

// ---------------
// 针对显示宽度小于该尺寸时对分栏引用块的调整
@media screen and (max-width: 600px) {
    // ========================================
    // 纵向显示的整体调整
    // ----------------------------------------
    // 列表分栏
    // 以双栏方式显示列表
    #write @{hr_MdHr}+ul>li,
    #write @{hr_MdHr}+ul>@{n2Li},
    #write @{hr_MdHr}+ol>li,
    #write @{hr_MdHr}+ol>@{n2Li},
    // 以三栏方式显示列表
    #write @{n2Hr_MdHr}+ul>li,
    #write @{n2Hr_MdHr}+ul>@{n2Li},
    #write @{n2Hr_MdHr}+ul>@{n3Li},
    #write @{n2Hr_MdHr}+ol>li,
    #write @{n2Hr_MdHr}+ol>@{n2Li},
    #write @{n2Hr_MdHr}+ol>@{n3Li},
    // 以四栏方式显示列表
    #write @{n3Hr_MdHr}+ul>li,
    #write @{n3Hr_MdHr}+ul>@{n2Li},
    #write @{n3Hr_MdHr}+ul>@{n3Li},
    #write @{n3Hr_MdHr}+ul>@{n4Li},
    #write @{n3Hr_MdHr}+ol>li,
    #write @{n3Hr_MdHr}+ol>@{n2Li},
    #write @{n3Hr_MdHr}+ol>@{n3Li},
    #write @{n3Hr_MdHr}+ol>@{n4Li},
    // 以五栏方式显示列表
    #write @{n4Hr_MdHr}+ul>li,
    #write @{n4Hr_MdHr}+ul>@{n2Li},
    #write @{n4Hr_MdHr}+ul>@{n3Li},
    #write @{n4Hr_MdHr}+ul>@{n4Li},
    #write @{n4Hr_MdHr}+ul>@{n5Li},
    #write @{n4Hr_MdHr}+ol>li,
    #write @{n4Hr_MdHr}+ol>@{n2Li},
    #write @{n4Hr_MdHr}+ol>@{n3Li},
    #write @{n4Hr_MdHr}+ol>@{n4Li},
    #write @{n4Hr_MdHr}+ol>@{n5Li} {
        min-width: 100% !important;
        height: auto !important;
    }
    // 双栏列表内容之间的样式
    #write @{hr_MdHr}+ul>@{n2Li},
    #write @{hr_MdHr}+ol>@{n2Li},
    // 三栏列表内容之间的样式
    #write @{n2Hr_MdHr}+ul>@{n2Li},
    #write @{n2Hr_MdHr}+ul>@{n3Li},
    #write @{n2Hr_MdHr}+ol>@{n2Li},
    #write @{n2Hr_MdHr}+ol>@{n3Li},
    // 四栏列表内容之间的样式
    #write @{n3Hr_MdHr}+ul>@{n2Li},
    #write @{n3Hr_MdHr}+ul>@{n3Li},
    #write @{n3Hr_MdHr}+ul>@{n4Li},
    #write @{n3Hr_MdHr}+ol>@{n2Li},
    #write @{n3Hr_MdHr}+ol>@{n3Li},
    #write @{n3Hr_MdHr}+ol>@{n4Li},
    // 五栏列表内容之间的样式
    #write @{n4Hr_MdHr}+ul>@{n2Li},
    #write @{n4Hr_MdHr}+ul>@{n3Li},
    #write @{n4Hr_MdHr}+ul>@{n4Li},
    #write @{n4Hr_MdHr}+ul>@{n5Li},
    #write @{n4Hr_MdHr}+ol>@{n2Li},
    #write @{n4Hr_MdHr}+ol>@{n3Li},
    #write @{n4Hr_MdHr}+ol>@{n4Li},
    #write @{n4Hr_MdHr}+ol>@{n5Li} {
        margin-left: 0 !important;
    }

    // ----------------------------------------
    // 双栏引用块
    #write @{hr_MdHr}+@{quote_details_gsa},
    #write @{hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
    // 三栏引用块
    #write @{n2Hr_MdHr}+@{quote_details_gsa},
    #write @{n2Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n2Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
    // 四栏引用块
    #write @{n3Hr_MdHr}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa} {
        min-width: 100% !important;
        height: auto !important;
    }
    // ----------------------------------------
    // 纵向显示的微调
    // 双栏引用块内容之间
    #write @{hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
    // 三栏引用块内容之间
    #write @{n2Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n2Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
    // 四栏引用块内容之间
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
    #write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa} {
        margin-left: 0 !important;
    }
}

// ---------------
// 针对小于该分辨设备的 UI 调整
@media screen and (max-width: 550px) {
}

// 移动端时相关样式
.genForMobile() {
    :root {
        --thm-c-t-pd: @coverTextPaddingForMobile;
        --thm-bc-t-pd: @backcoverTextPaddingForMobile;

        --thm-c-bg-size: @coverBgSizeForMobile;
        --thm-c-bg-pos: @coverBgPositionForMobile;

        --thm-cc-left-right-pd: @ccLeftRightPaddingForMobile;

        --thm-bc-bg-size: @backcoverBgSizeForMobile;
        --thm-bc-bg-pos: @backcoverBgPositionForMobile;
    }

    // 封面：#write 下 H6 作为第一个元素时
    @{coverAfterYAML}, // 有 YAML 的情况
    @{coverWithoutYAML}, // 无 YAML 的情况
    // 封底：#write 下 H6 作为最后一个元素时
    @{backcover} {
        font-size: 2.125em;
    }

    .v-link-info-list {
        width: auto !important;
        left: @writePaddingRight;
    }

    // 明信片
    #write img[src*="#card"] {
        border-radius: var(--v-r-b) var(--v-r-b-xc) 0 0 !important;
    }
    #write .v-post-card {
        display: block;
        position: relative;
        border-radius: 0 0 var(--v-r-b) var(--v-r-b-xc) !important;
    }

    // 流媒体平台
    @{iframeVideoOnEditing} @{biliVideo},
    @{iframeVideoOnEditing} @{douyinVideo},
    @{iframeVideoOnEditing} @{xiguaVideo},
    @{iframeVideoOnEditing} @{qqVideo},
    @{iframeVideoOnEditing} @{youtubeVideo},
    @{iframeVideo} @{biliVideo},
    @{iframeVideo} @{douyinVideo},
    @{iframeVideo} @{xiguaVideo},
    @{iframeVideo} @{qqVideo},
    @{iframeVideo} @{youtubeVideo},
    // 竖屏标识 portrait
    @{iframeVideoOnEditing} @{biliVideo}@{portraitMode},
    @{iframeVideoOnEditing} @{douyinVideo}@{portraitMode},
    @{iframeVideoOnEditing} @{xiguaVideo}@{portraitMode},
    @{iframeVideoOnEditing} @{qqVideo}@{portraitMode},
    @{iframeVideoOnEditing} @{youtubeVideo}@{portraitMode},
    @{iframeVideo} @{biliVideo}@{portraitMode},
    @{iframeVideo} @{douyinVideo}@{portraitMode},
    @{iframeVideo} @{xiguaVideo}@{portraitMode},
    @{iframeVideo} @{qqVideo}@{portraitMode},
    @{iframeVideo} @{youtubeVideo}@{portraitMode} {
        width: 100% !important;
    }
}

// 针对大屏手机的 UI 调整
@media screen and (min-width: 361px) and (max-width: 639px) {
}

// 针对中小屏手机的 UI 调整
@media screen and (max-width: 360px) {
}

// ---------------
// 针对不的 DRP
@media  (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
}

// 主题中指定仅支持 Light Mode 时，生成对应的 CSS 变量
.genDarkMode() when (isdefined(@onlyLightMode)) {
    :root {
        --v-only-light-mode: true; // 对应的插件变量 gOnlyLightMode
    }
}
// 主题中没有指定仅支持 Light Mode 时，生成针对 Dark Mode的配置
.genDarkMode() when not (isdefined(@onlyLightMode)) {
    @media (prefers-color-scheme: dark) {
        :root {
            --v-color-scheme: dark;
            --v-invert-dark: var(--v-invert-dark-dk); // Dark Mode下图片滤镜
            --v-brightness-dk: var(--v-brightness-dark-dk); // Dark Mode下封面、封底滤镜
            --v-selected-color: var(--v-selected-color-dk);

            // --------------------
            // 颜色变量
            --d-bc: var(--d-bc-dk);
            --fade-r: var(--fade-r-dk);
            --fade-g: var(--fade-g-dk);
            --fade-b: var(--fade-b-dk);
            --d-bi: var(--d-bi-dk);
            --d-fc: var(--d-fc-dk);
            --d-fc-a: var(--d-fc-a-dk);

            --pn-c: var(--pn-c-dk);
            --pn-c-a: var(--pn-c-a-dk);
            --pn-fade-r: var(--pn-fade-r-dk);
            --pn-fade-g: var(--pn-fade-g-dk);
            --pn-fade-b: var(--pn-fade-b-dk);
            --blockquote-bg: var(--blockquote-bg-dk);

            --a-color: var(--a-color-dk);
            --a-hover-color: var(--a-hover-color-dk);
            --mark-bg: var(--mark-bg-dk);
            // --tbl-h-bd: var(--tbl-h-bd-dk);
            // --tbl-bd: var(--tbl-bd-dk);
            // --tbl-tr-hv: var(--tbl-tr-hv-dk);
            // --tbl-th-bg: var(--tbl-th-bg-dk);
            // --tbl-td-bg: var(--tbl-td-bg-dk);
            // --tbl-cell-bd: var(--tbl-cell-bd-dk);
            --tbl-row-g-alpha: var(--tbl-row-g-alpha-dk);
            --toc-h-num-color: var(--toc-h-num-color-dk);
            --h-f: var(--h-f-dk);
            --h-box-shadow: var(--h-box-shadow-dk);
            --h-bg-start: var(--h-bg-start-dk);
            --h-bg-end: var(--h-bg-end-dk);
            --code-bg: var(--code-bg-dk);
            --code-t: var(--code-t-dk);
            --std-code-shadow: var(--std-code-shadow-dk);
            --rb-code-shadow: var(--rb-code-shadow-dk);

            --v-fl-sd: var(--v-fl-sd-dk);
            --v-fl-i-sd: var(--v-fl-i-sd-dk);

            --c-blk-bg: var(--c-blk-bg-dk);

            --fig-solid-bg: var(--fig-solid-bg-dk);

            --v-fig-grid-l: var(--v-fig-grid-l-dk);
            --v-fig-grid-b: var(--v-fig-grid-b-dk);

            --v-fig-grid-l-invert: var(--v-fig-grid-l-invert-dk);
            --v-fig-grid-b-invert: var(--v-fig-grid-b-invert-dk);

            --kbd-bg: var(--kbd-bg-dk);
            --kbd-reflect: var(--kbd-reflect-dk);
            --kbd-shadow: var(--kbd-shadow-dk);
            // 反转色
            --kbd-bg-i: var(--kbd-bg-lg);
            --kbd-reflect-i: var(--kbd-reflect-lg);
            --kbd-shadow-i: var(--kbd-shadow-lg);

            --doc-shadow: var(--doc-shadow-dk);
            --img-bd-invert: var(--img-bd-invert-dk);

            --cur-pointer: var(--cur-pointer-dk);
            --cur-copy-normal: var(--cur-copy-normal-dk);
            --cur-copy-as-md: var(--cur-copy-as-md-dk);
            --cur-copy: var(--cur-copy-normal);
            --cur-pointer-text: var(--cur-pointer-text-dk);
            --cur-laser: var(--cur-laser-dk);
            // --cur-md: var(--cur-md-dk);
            --cur-doclib: var(--cur-doclib-dk);
            --cur-http: var(--cur-http-dk);
            --cur-https: var(--cur-https-dk);
            --cur-email: var(--cur-email-dk);
            // --cur-docment: var(--cur-docment-dk);
            // --cur-archive: var(--cur-archive-dk);
            --cur-risk: var(--cur-risk-dk);
            --cur-inner: var(--cur-inner-dk);

            --ac-rd: var(--ac-rd-dk);
            --ac-rd-a: var(--ac-rd-a-dk);
            --ac-rd-fade: var(--ac-rd-fade-dk);
            --ac-rd-title: var(--ac-rd-title-dk);
            --ac-og: var(--ac-og-dk);
            --ac-og-a: var(--ac-og-a-dk);
            --ac-og-fade: var(--ac-og-fade-dk);
            --ac-og-title: var(--ac-og-title-dk);
            --ac-ye: var(--ac-ye-dk);
            --ac-ye-a: var(--ac-ye-a-dk);
            --ac-ye-fade: var(--ac-ye-fade-dk);
            --ac-ye-title: var(--ac-ye-title-dk);
            --ac-lm: var(--ac-lm-dk);
            --ac-lm-a: var(--ac-lm-a-dk);
            --ac-lm-fade: var(--ac-lm-fade-dk);
            --ac-lm-title: var(--ac-lm-title-dk);
            --ac-gn: var(--ac-gn-dk);
            --ac-gn-a: var(--ac-gn-a-dk);
            --ac-gn-fade: var(--ac-gn-fade-dk);
            --ac-gn-title: var(--ac-gn-title-dk);
            --ac-mn: var(--ac-mn-dk);
            --ac-mn-a: var(--ac-mn-a-dk);
            --ac-mn-fade: var(--ac-mn-fade-dk);
            --ac-mn-title: var(--ac-mn-title-dk);
            --ac-ol: var(--ac-ol-dk);
            --ac-ol-a: var(--ac-ol-a-dk);
            --ac-ol-fade: var(--ac-ol-fade-dk);
            --ac-ol-title: var(--ac-ol-title-dk);
            --ac-wn: var(--ac-wn-dk);
            --ac-wn-a: var(--ac-wn-a-dk);
            --ac-wn-fade: var(--ac-wn-fade-dk);
            --ac-wn-title: var(--ac-wn-title-dk);
            --ac-aq: var(--ac-aq-dk);
            --ac-aq-a: var(--ac-aq-a-dk);
            --ac-aq-fade: var(--ac-aq-fade-dk);
            --ac-aq-title: var(--ac-aq-title-dk);
            --ac-cy: var(--ac-cy-dk);
            --ac-cy-a: var(--ac-cy-a-dk);
            --ac-cy-fade: var(--ac-cy-fade-dk);
            --ac-cy-title: var(--ac-cy-title-dk);
            --ac-bu: var(--ac-bu-dk);
            --ac-bu-a: var(--ac-bu-a-dk);
            --ac-bu-fade: var(--ac-bu-fade-dk);
            --ac-bu-title: var(--ac-bu-title-dk);
            --ac-se: var(--ac-se-dk);
            --ac-se-a: var(--ac-se-a-dk);
            --ac-se-fade: var(--ac-se-fade-dk);
            --ac-se-title: var(--ac-se-title-dk);
            --ac-la: var(--ac-la-dk);
            --ac-la-a: var(--ac-la-a-dk);
            --ac-la-fade: var(--ac-la-fade-dk);
            --ac-la-title: var(--ac-la-title-dk);
            --ac-vn: var(--ac-vn-dk);
            --ac-vn-a: var(--ac-vn-a-dk);
            --ac-vn-fade: var(--ac-vn-fade-dk);
            --ac-vn-title: var(--ac-vn-title-dk);
            --ac-pu: var(--ac-pu-dk);
            --ac-pu-a: var(--ac-pu-a-dk);
            --ac-pu-fade: var(--ac-pu-fade-dk);
            --ac-pu-title: var(--ac-pu-title-dk);
            --ac-ro: var(--ac-ro-dk);
            --ac-ro-a: var(--ac-ro-a-dk);
            --ac-ro-fade: var(--ac-ro-fade-dk);
            --ac-ro-title: var(--ac-ro-title-dk);
            --ac-pk: var(--ac-pk-dk);
            --ac-pk-a: var(--ac-pk-a-dk);
            --ac-pk-fade: var(--ac-pk-fade-dk);
            --ac-pk-title: var(--ac-pk-title-dk);
            --ac-gd: var(--ac-gd-dk);
            --ac-gd-a: var(--ac-gd-a-dk);
            --ac-gd-fade: var(--ac-gd-fade-dk);
            --ac-gd-title: var(--ac-gd-title-dk);
            --ac-bn: var(--ac-bn-dk);
            --ac-bn-a: var(--ac-bn-a-dk);
            --ac-bn-fade: var(--ac-bn-fade-dk);
            --ac-bn-title: var(--ac-bn-title-dk);
            --ac-gy: var(--ac-gy-dk);
            --ac-gy-a: var(--ac-gy-a-dk);
            --ac-gy-fade: var(--ac-gy-fade-dk);
            --ac-gy-title: var(--ac-gy-title-dk);
            --ac-wt: var(--ac-wt-dk);
            --ac-wt-a: var(--ac-wt-a-dk);
            --ac-wt-fade: var(--ac-wt-fade-dk);
            --ac-wt-title: var(--ac-wt-title-dk);
            --ac-bk: var(--ac-bk-dk);
            --ac-bk-a: var(--ac-bk-a-dk);
            --ac-bk-fade: var(--ac-bk-fade-dk);
            --ac-bk-title: var(--ac-bk-title-dk);
            --ac-t1: var(--ac-t1-dk);
            --ac-t1-a: var(--ac-t1-a-dk);
            --ac-t1-fade: var(--ac-t1-fade-dk);
            --ac-t1-title: var(--ac-t1-title-dk);
            --ac-t2: var(--ac-t2-dk);
            --ac-t2-a: var(--ac-t2-a-dk);
            --ac-t2-fade: var(--ac-t2-fade-dk);
            --ac-t2-title: var(--ac-t2-title-dk);

            // ---

            --ac-gd-fade-bd: var(--ac-gd-fade-bd-dk);
            --ac-pk-fade-bd: var(--ac-pk-fade-bd-dk);
            --ac-ye-fade-bd: var(--ac-ye-fade-bd-dk);
            --ac-lm-fade-bd: var(--ac-lm-fade-bd-dk);
            --ac-aq-fade-bd: var(--ac-aq-fade-bd-dk);
            --ac-la-fade-bd: var(--ac-la-fade-bd-dk);

            --ac-bn-fade-bd: var(--ac-bn-fade-bd-dk);
            --ac-ro-fade-bd: var(--ac-ro-fade-bd-dk);
            --ac-rd-fade-bd: var(--ac-rd-fade-bd-dk);
            --ac-og-fade-bd: var(--ac-og-fade-bd-dk);
            --ac-gn-fade-bd: var(--ac-gn-fade-bd-dk);
            --ac-cy-fade-bd: var(--ac-cy-fade-bd-dk);
            --ac-bu-fade-bd: var(--ac-bu-fade-bd-dk);
            --ac-vn-fade-bd: var(--ac-vn-fade-bd-dk);
            --ac-gy-fade-bd: var(--ac-gy-fade-bd-dk);

            --ac-pu-fade-bd: var(--ac-pu-fade-bd-dk);
            --ac-wn-fade-bd: var(--ac-wn-fade-bd-dk);
            --ac-ol-fade-bd: var(--ac-ol-fade-bd-dk);
            --ac-mn-fade-bd: var(--ac-mn-fade-bd-dk);
            --ac-se-fade-bd: var(--ac-se-fade-bd-dk);
            --ac-wt-fade-bd: var(--ac-wt-fade-bd-dk);
            --ac-bk-fade-bd: var(--ac-bk-fade-bd-dk);

            --ac-t1-fade-bd: var(--ac-t1-fade-bd-dk);
            --ac-t2-fade-bd: var(--ac-t2-fade-bd-dk);

            // 针对 Typora 代码块着色样式变量
            --cm-keyword: var(--cm-keyword-dk);
            --cm-variable: var(--cm-variable-dk);
            --cm-variable-2: var(--cm-variable-2-dk);
            --cm-variable-3: var(--cm-variable-3-dk);
            --cm-tag: var(--cm-tag-dk);
            --cm-attribute: var(--cm-attribute-dk);
            --cm-string: var(--cm-string-dk);
            --cm-string-2: var(--cm-string-2-dk);
            --cm-comment: var(--cm-comment-dk);
            --cm-header: var(--cm-header-dk);
            --cm-quote: var(--cm-quote-dk);
            --cm-hr: var(--cm-hr-dk);
            --cm-link: var(--cm-link-dk);
            --cm-negative: var(--cm-negative-dk);
            --cm-positive: var(--cm-positive-dk);
            --cm-meta: var(--cm-meta-dk);
            --cm-bulidin: var(--cm-bulidin-dk);
            --cm-bracket: var(--cm-bracket-dk);
            --cm-atom: var(--cm-atom-dk);
            --cm-number: var(--cm-atom-dk);

            // --------------------
            // 针对 Typora UI 颜色变量
            --bg-color: var(--d-bc-dk);
            --side-bar-bg-color: var(--d-bc-dk);
            --text-color: var(--d-fc-dk);

            --control-text-color: var(--d-fc-dk);
            --control-text-hover-color: var(--d-fc-dk);
            --window-border: 1px solid var(--pn-c-dk);

            --active-file-bg-color:  var(--d-bc-dk);
            --active-file-text-color: var(--d-fc-dk);

            --item-hover-bg-color: var(--pn-c-dk);
            --item-hover-text-color: var(--d-fc-dk);

            --primary-color: @theme1Dark;

            --search-select-bg-color: fade(#888888, 50%);
        }

        // 错误图片背景反色
        #write .md-img-error>.md-meta {
            filter: var(--v-invert-dark);
        }

        // 备注文本
        .noteText tspan {
            fill: var(--d-fc-lg) !important;
        }

        // 代码块内代码区域
        #write pre.ty-contain-cm .CodeMirror-lines {
            background: var(--c-blk-bg);
            background-size: @codeBlockBackgroundSize;
            background-repeat: @codeBlockBackgroundRepeat;
            background-position: @codeBlockBackgroundPosition;
        }
    }
}
.genDarkMode();